<template>
    <div class="information containers">
        <div class="aboutTitle mb-20">联系我们</div>
        <div class="aboutList mb-20">
            <div class="item" v-for="(item, index) in aboutList" :key="index"
                v-if="item.name!= 'blurb' && item.name!= 'map'&& item.name!= 'blurb'&&item.name!= 'code'  &&item.name!= 'lng' &&item.name!= 'lat'&&item.name!= 'contact'">
                {{ item.title }}：{{ item.value }}
            </div>
        </div>
        <HeadTItle topTitle="地图位置" botTitle="Map location" class="mb-20" />
        <div class="details mb-20">
            <div id="allmap"></div>
        </div>
        <HeadTItle topTitle="二维码" botTitle="QR code" class="mb-20" />
        <div class="QrCode f f-jb">
            <div class="QrImg">
                <img :src="baseUrl+ code" alt="" srcset="" class="image" />
            </div>
            <div class="rightName">林芝群艺馆</div>
        </div>
    </div>
</template>
<script>
    import HeadTItle from "@/components/HeadTItle/index";
    import {
        configGet
    } from "@/utils/home/index.js";
    export default {
        components: {
            HeadTItle
        },
        data() {
            return {
                baseUrl: process.env.VUE_APP_BASE_API,
                image: "https://img1.maka.im/user/5220742/poster/T_VZYMWJIS/T_VZYMWJIS_v3.jpg",
                aboutList: [{
                        name: "公司地址：林芝市群众艺术馆天府大道环球中心N",
                    },
                    {
                        name: "电话号码：13332886594",
                    },
                    {
                        name: "联系方式：400-646-894",
                    },
                    {
                        name: "电子邮箱：mail1to:627127885@qq.com",
                    },
                ],
                lat: '',
                lng: '',
                code: ''
            };
        },
        created() {
            this.getList();
        },
        mounted() {

        },
        methods: {
            // 获取联系方式
            getList() {
                this.loading = true;
                let that = this
                configGet().then((response) => {
                    that.aboutList = response.data.list
                    that.lng = response.data.list.filter(item => item.name == 'lng')[0].value
                    that.lat = response.data.list.filter(item => item.name == 'lat')[0].value
                    that.code = response.data.list.filter(item => item.name == 'code')[0].value
                    // that.lat = that.aboutList['name'].value
                    that.getMap();
                    that.loading = false;
                });
            },
            getMap() {
                // 按住鼠标右键，修改倾斜角和角度
                var map = new BMapGL.Map("allmap"); // 创建Map实例
                map.centerAndZoom(new BMapGL.Point(this.lng, this.lat), 11); // 初始化地图,设置中心点坐标和地图级别
                map.enableScrollWheelZoom(true); //开启鼠
            },
        },
    };
</script>
<style>
    .information {
        box-sizing: border-box;
        width: 1200px;
        background: #fff;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0px 3px 10px 0px rgba(217, 217, 217, 0.5);
        margin-top: 20px;
        margin-bottom: 20px;
        height: calc(100% - 64px);
        padding: 20px;

        .aboutTitle {
            color: var(--unnamed, #0a4ab6);
            font-family: FZDaBiaoSong-B06S;
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            text-align: center;
        }

        .aboutList {
            display: flex;
            flex-wrap: wrap;

            .item {
                width: 47%;
                border-radius: 4px;
                background: #f7f8fa;
                padding: 10px;
                box-sizing: border-box;
                margin-top: 10px;

                &:nth-child(odd) {
                    margin-right: 6%;
                }
            }
        }

        .details {
            margin-top: 20px;
            font-size: 16px;

            #allmap {
                height: 655px;
            }
        }

        .QrCode {
            .QrImg {
                width: 194px;
                height: 193px;
                flex-shrink: 0;

                .image {
                    width: 100%;
                    height: 100%;
                }
            }

            .rightName {
                color: #000;
                font-family: PingFang SC;
                font-size: 20px;
                font-style: normal;
                font-weight: 400;
                line-height: 40px;
                /* 200% */
            }
        }
    }
</style>